$(".headerBox").load("http://localhost:3000/public/header.html .zxt_header")
$(".footerBox").load("http://localhost:3000/public/header.html .zxt_footer")



class getGoods{
    constructor(){
        this.cont = document.querySelector(".cont");
        this.url = "http://localhost:3000/api";
        this.pagbox= document.querySelector(".pagbox");

        // this.index = 0;
        // 1. 获取数据
        this.getData();
        this.addEvent();

    }
    addEvent(){
        const that=this;
        // 利用事件委托，绑定添加购物车的点击事件
        this.cont.addEventListener("click",function(eve){
            const e=eve||window.event;
            const target=e.target||e.srcElement;
            if(target.className === "add"){
                // console.log(target)
                // 2. 获取当前商品的id
                that.id = target.parentNode.parentNode.getAttribute("index")
                // that.allPrice=target.parentNode.previousSibling.children("money")
                console.log(that.id);
                // // 3. 将数据存到本地存储中
                that.setLocal();
            }
        })
    }
    setLocal(){
        const goods = localStorage.getItem("goods") ? JSON.parse(localStorage.getItem("goods")) : [];
        console.log(goods)

        // 判断是否是第一次添加购物车
        if(goods.length < 1){
            // 第一次加入购物车：直接添加数据
            goods.push({
                id:this.id,
                num:1,
                flag:1,
                // allPrice:allPrice
            })
        }else{
            // 不是第一次加入购物车：
            // 遍历
            let i = 0;
            const flag = goods.some((val,idx)=>{
                //some(function(val,idx,self))
                //参数1：数组中的数据  参数2：索引  (当前索引的值)  参数3：数组自身
                i = idx;

                return val.id === this.id
            })
            // 判断本次添加的是否是新商品
            if(flag){
                // 是老商品：增加指定商品的数量
               
                goods[i].num++;
            }else{
                // 不是老商品：增加数据
                goods.push({
                    id:this.id,
                    num:1,
                    flag:1,

                    // allPrice:allPrice
                })
            }
        }

        // 再存回去
        localStorage.setItem("goods", JSON.stringify(goods))
    }

    getData(){
        // console.log(123)
        ajax({
            url:this.url,
            data:{
                type:"getGoods"
            },
            success:res => {
                // 2. 解析数据
                // console.log(res);
                this.res = JSON.parse(res);
                // console.log(this.res.length)

                // 渲染页码
                this.renderPage()

                // 4. 渲染页面
                this.render();


            }
        })
    }
    // renderPage(){
    //     console.log(this.res.length)
    //     this.pagbox.pagination(80,{
    //                 items_per_page:8,
    //                 prev_text:"上一页",
    //                 next_text:"下一页",
    //                 callback:function(aaa){
    //                     console.log(aaa)
    //                     this.index=aaa;
    //                 }
    //     })
    // }

    renderPage(){
        $(".pagbox").pagination(80,{
            items_per_page:8,
            current_page: this.index,
            prev_text:"上一页",
            next_text:"下一页",
            callback:function(aaa){
                this.index=aaa;
                console.log(this.index)

            }
        })
    }
    // render(){
    //     // console.log(this.res , this.index);

    //     // 0: 0~4       num*index ~ num*index+num
    //     // 1: 4~8       num*index ~ num*index+num
    //     // 2: 8~12      num*index ~ num*index+num
    //     // 3: 12~16      num*index ~ num*index+num
    //     // 4: 16~20      num*index ~ num*index+num
    //     // 5: 20~24      num*index ~ num*index+num
    //     // 6: 24~28      num*index ~ num*index+num

    //     let str = "";
    //     for(var i=this.index*this.num;i<this.index*this.num+this.num;i++){
    //         if(i<this.res.length){
    //             str += `<li>
    //                     <div class="img">
    //                         <img src="${this.res[i].img}">
    //                     </div>
    //                     <div class="detail">
    //                         ${this.res[i].info}
    //                         <span class="price">特价$${this.res[i].price}</span>
    //                     </div>
    //                 </li>`;
    //         }
    //     }
    //     this.list.html(str);
    // }

    render(){
        let str = "";
        this.res.forEach(val=>{
              
            str+=`
            <div class="box" index="${val.index}">

            <a href="./details.html?id=${val.index}">
            <img src="${val.bigImg}" alt="">
            <span>${val.title}</span>

            <div class="pri">
                <p class="money">￥${val.money}</p>
                <p class="number">${val.number}</p>
            </div>
            </a>

                <div class="hide">
                    <p class="add">加入购物车</p>
                </div>

            
            </div>
            `
        })

        this.cont.innerHTML = str;
    }
}
new getGoods();